<!--
 * @Descripttion: 
 * @version: 
 * @Author: lixx
 * @Date: 2025-07-08 17:36:46
 * @LastEditors: lixx
 * @LastEditTime: 2025-07-08 17:51:11
-->
<template>
  <div class="wrap">
    <div class="process" :style="{ width: process + '%' }"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const process = ref(0)

let timer = ref<number>(0)

// 开始动画
const startLoading = () => {
  timer.value = window.requestAnimationFrame(function animate() {
    if (process.value < 90) {
      process.value++
      timer.value = window.requestAnimationFrame(animate)
    } else {
      process.value = 1
      window.cancelAnimationFrame(timer.value)
    }
  })
}

const endLoading = () => {
  window.requestAnimationFrame(() => {
    process.value = 100
  })
}

defineExpose({
  startLoading,
  endLoading,
})
</script>

<style scoped>
.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}
.process {
  width: 0;
  height: 100%;
  background-color: #409eff;
}
</style>